<template>
  <main>
    <swiper-container
      class="swiper-container"
      navigation="true"
      ref="mainSwiper"
      pagination="true"
      :autoplay="swiperOptions.autoplay"
      @init="init"
      :loop="true"
    >
      <swiper-slide v-pre>
        <img src="../assets/page/swiper_img.png" alt="" />
      </swiper-slide>
      <swiper-slide v-pre>
        <img src="../assets/page/swiper_img.png" alt="" />
      </swiper-slide>
      <swiper-slide v-pre>
        <img src="../assets/page/swiper_img.png" alt="" />
      </swiper-slide>
    </swiper-container>
  </main>
</template>

<script setup>
import { register } from "swiper/element/bundle";
register(); // 注册 swiper 组件,如果安装方法使用的是 cdn,则不需要这一步,也不需要上方的引入
const swiperOptions = {
  autoplay: {
    delay: 1000,
    enabled: true,
  },
};
const init = () => {
  console.log("1");
};
</script>


<style>
@media screen and (max-width:1024px) {
  main{
   height: 200px;
  }
}
</style>